<template>
  <div>
    <el-table ref="filterTable" :data="tableData" style="width: 100%">
      <el-table-column
        prop="stuid"
        label="学号"
        sortable
        width="180"
        column-key="stuid"
      >
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="sfzid" label="身份证号" :formatter="formatter">
      </el-table-column>
      <el-table-column prop="college" label="学院" :formatter="formatter">
      </el-table-column>
      <el-table-column prop="major" label="专业" :formatter="formatter">
      </el-table-column>
      <el-table-column prop="result" label="比对结果" :formatter="formatter">
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination"
      :current-page="currentPage"
      @current-change="PageClick"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      currentPage: 1,
      tableData: null,
    };
  },
  created() {
    this.getDataByPage(1);
  },
  methods: {
    PageClick() {
      console.log(this.currentPage);
      this.getDataByPage(this.currentPage);
    },
    getDataByPage(page) {
      axios
        .get("http://127.0.0.1:8000/student/list?page=" + page)
        .then((res) => {
          this.tableData = res.data;
        });
    },
    // 学号查询
    searchByStuid(stuid) {
      axios.get("http://127.0.0.1:8000/student/search_by_stuid?stuid=" + stuid).then(
      (res)=>{
        this.tableData = res.data
      }
      )
    }
  },
};
</script>

<style scoped>
.pagination {
  margin-top: 10px;
}
</style>